<template>
  <div>
    <div class="list-header flex-row">
      <span>数据源</span>
    </div>
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
      <template #default="scope">
        <div v-if="scope.data.children" class="model-node">
          <el-icon><Folder /></el-icon>
          <span>{{ scope.node.label }}</span>
        </div>
        <div v-else>
          <i class="iconfont icon-biaoge1"></i>
          <span>{{ scope.node.label }}</span>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 树级结构数据
const data = ref([
  {
    label: "文件数据源",
    children: [
      {
        label: "行业",
        children: [
          {
            label: "项目人员工作进度表",
            children: [
              {
                label: "项目计划表",
              },
              {
                label: "项目实施表",
              },
            ],
          },
          {
            label: "近8年指标",
            children: [
              {
                label: "2010年指标",
              },
              {
                label: "2011年指标",
              },
              {
                label: "2012年指标",
              },
              {
                label: "2013年指标",
              },
              {
                label: "2014年指标",
              },
              {
                label: "2015年指标",
              },
              {
                label: "2016年指标",
              },
              {
                label: "2017年指标",
              },
            ],
          },
        ],
      },
    ],
  },
]);
/** 树节点选中 */
const handleNodeClick = (data) => {
  console.log(data);
};
const defaultProps = {
  children: "children",
  label: "label",
};
</script>

<style scoped lang="scss">
.list-header {
  height: 43px;
  border-bottom: 1px solid #e8e8e8;
  padding: 0px 15px 0px 10px;
  font-size: 13px;
  font-weight: 700;
}
:deep(.el-tree-node__content) {
  height: 36px;
}
</style>
